<template>
  <div class="card">
    <div class="box">
      <div class="box-top">
        <div class="title">
          <div class="left">项目看板</div>
          <div class="right">
            <a-button type="link" @click="goback()">查看更多</a-button>
          </div>
        </div>
        <div class="btn-group">
          <a-button-group>
            <a-button
              style="width:100px;"
              :type="btnActive==1 ? 'primary' : ''"
              @click="setActive(1)"
            >监测</a-button>
            <a-button
              style="width:100px;"
              :type="btnActive==2 ? 'primary' : ''"
              @click="setActive(2)"
            >监护</a-button>
          </a-button-group>
        </div>
      </div>
      <div class="content">
        <div class="title_text">项目阶段</div>
        <div id="container"></div>
      </div>
    </div>
  </div>
</template>
<script>

import { Pie } from "@antv/g2plot";
import { queryProStatusNum,queryProject } from "@/request/api"
import { Donut } from "@antv/g2plot";
export default {
  props: {},
  data() {
    return {
      offmain: 50,
      donutPlot: null,
      btnActive: 1,
      piePlot:null,
      status: undefined, //项目阶段状态 1：围护阶段；2：开挖阶段；3：结构阶段；4：结束阶段；5：已归档
      tableLoading: false, //table Loading
      proStatus:{},//围护/开挖等...状态的项目数量
      endData:"",
      pagination: {
        //分页参数
        current: 1, //当前页
        total: 0, //总条数
        pageSize: 10, //每页多少条
        showQuickJumper: true, //显示跳转到第N页的输入框
      },
      move: undefined,
      word: "", //项目名称模糊查询
      active: 1, // 监测
      pageNum:1,
      hreadcrumbAry: [
        { name: "首页", path: "/", query: {} },
        { name: "数据分析", path: "/", query: {} },
        { name: "项目概览地图", path: "/", query: {} },
      ],
      listData: [],
      g2Ary: [],
    };
  },
  components: {},
  created() {},
  mounted() {
    this.queryProStatusNum();
  },
  methods: {
    // 各个项目的项目总数
    async queryProStatusNum() {
      let {data} = await queryProStatusNum(this.btnActive);
      // console.log("222",data)
      if (data.code === 200) {
        this.proStatus = data.result;
        this.g2Ary = [
          {
            type: "围护阶段" ,
            value: this.proStatus.whTotal,
          },
          {
            type: "开挖阶段",
            value: this.proStatus.kwTotal,
          },
          {
            type: "结构阶段",
            value: this.proStatus.jgTotal,
          },
          {
            type: "结束阶段",
            value: this.proStatus.jsTotal,
          },
          {
            type: "归档阶段",
            value: this.proStatus.gdTotal,
          },
        ]
        this.offmain = (this.proStatus.whTotal + this.proStatus.kwTotal + this.proStatus.jgTotal + this.proStatus.gdTotal + this.proStatus.jsTotal)

        if(this.donutPlot){
          this.donutPlot.destroy()
          this.initdonutPlot()
        }else{
          this.initdonutPlot()
        }
      }
    },
    setActive(val) {
      this.btnActive = val;
      console.log(val)
      this.queryProStatusNum();
    },
    goback(){
      this.$router.push("/data_projectList")
    },
    initdonutPlot() {
      this.donutPlot = new Donut(document.getElementById("container"), {
        radius: 0.6,
        innerRadius: 0.8,
        data: this.g2Ary,
        color: ["rgba(60, 144, 247, 1)","rgba(224, 86, 103, 1)","rgba(94, 190, 103, 1)","rgba(244, 205, 73, 1)","rgba(128, 128, 128, 1)"],
        angleField: "value",
        colorField: "type",
        label: {
          visible: false,
        },
        legend: {
          offsetX:-20,
          text:{
            formatter:(text,cfg)=> {
              console.log(cfg)
              switch (text) {
                case '围护阶段' : return `${text}     ${this.proStatus.whTotal}`
                break;
                case '开挖阶段' : return `${text}     ${this.proStatus.kwTotal}`
                break;
                case '结构阶段' : return `${text}     ${this.proStatus.jgTotal}`
                break;
                case '结束阶段' : return `${text}     ${this.proStatus.jsTotal}`
                break;
                case '归档阶段' : return `${text}     ${this.proStatus.gdTotal}`
                break;
                default: return text
                break;
              }
            }
          },
        },
        statistic: {
          visible: true,
          content: {
            name: "项目总数",
            value: this.offmain,
          },
        },
        tooltip: {
          visible: true,
        },
        title: {
          style:{
            fontSize:18
          }
        }
      });
      this.donutPlot.render();
    },
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/css/base.less";
.box {
  background: #fff;
  border-top: 1px solid transparent;
  height: 500px;
  margin-bottom: 20px;
  .box-top {
    height: 85px;
    border-bottom: 1px solid #eee;
    .title {
      margin: 10px 15px 0;
      display: flex;
      justify-content: space-between;
    }
    .btn-group {
      margin: 5px 15px 0;
    }
  }
  .content{
    .title_text{
      width: 56px;
      margin-bottom: -32px;
      // padding-top: 32px;
      line-height: 64px;
      margin-left: 34px;
      // padding-top: 32px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 14px;
      text-align: left;
    }
    #container{
      bottom: 20px;
    }
  }
}
</style>
